<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../lib/doc.css">
    <link rel="stylesheet" href="../lib/main.css">
    <link rel="stylesheet" href="../v1.x/crazyTable/crazyTable.css">
    <title>crazyTable</title>

</head>
<body>

<div class="doc-layout">

    <div class="crazy-side">
        <h1>CrazyTable</h1>
        <ul>
            <li><a href="../index.html">介绍</a></li>
            <li><a href="crazyTable.html" class="crazy-this">安装和使用</a>
                <div>
                    <ul>
                        <li><a href="#install">- 引入和使用</a></li>
                        <li><a href="#options">- options主要参数</a></li>
                        <li><a href="#httpConfig">- httpConfig配置</a></li>
                    </ul>
                </div>
            </li>

            <li><a href="crazyFilter.html">1.表头过滤</a></li>
            <li><a href="crazyEdit.html">2.单元格编辑</a></li>
            <li><a href="crazyChild.html">3.子表扩展</a></li>
            <li><a href="crazyBox.html">其他说明</a></li>
        </ul>

    </div>

    <div class="doc-content" id="doc-content">
        <div class="layui-main">
            <h1 class="doc-h1">开始使用</h1>
            <div class="layui-text">
                在项目中，我们经常需要用到，表格字段的筛选、单元格编辑等功能。现有的layui table 在这方面功能还不够强大。
                参考了社区很多优秀的第三方插件，我汇总了一下，制作了一个 crazy Table 插件。将会陆续将比较好的插件改进、集成进来。
            </div>

            <div class="layui-text"></div>

            <!-- 1 -->
            <div id="install">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>引入和使用</legend>
                </fieldset>

                <h4><span class="layui-badge-dot"></span> 安装</h4>
                <pre class="layui-code" lay-encode="true">
    // 自定义模块，这里只需要开放 crazyTable 即可
    layui.config({
        base: 'v1.x/crazyTable/',   // 模块所在目录
    }).extend({
        crazyTable: 'crazyTable'  // 模块别名
    });
                </pre>

                <h4><span class="layui-badge-dot"></span> 引入 CSS</h4>
                <pre class="layui-code" lay-encode="true">
                // 在插件目录下，可以找到 <em>crazyTable.css</em> 文件，在项目页面引入即可。
            </pre>

                <h4><span class="layui-badge-dot"></span> 使用</h4>
                <pre class="layui-code" lay-encode="true">
    table.render({
        done: function(res, curr, count) {
            // 在 done 函数中，使用layui.use() 来调用刚才引入的第三方插件
            // 这样，既能保证每次table.reload 或 table.render 的时候，正确且有效使用第三方插件，
            // 也能保证 不会多次引入第三方插件。
            let othis = this;
            layui.use('crazyTable', function () {
                layui.crazyTable.render(othis, res); // 注意：引入这两个参数
            });
        }
    })
            </pre>
            </div>

            <!-- 2 -->
            <div id="options">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>Options主要参数说明</legend>
                </fieldset>

                <!--<h4><span class="layui-badge-dot"></span> 安装</h4>-->
                <p>在原来的table options 的基础上，增加如下配置项</p>

                <table class="layui-table">
                    <colgroup>
                        <col width="120">
                        <col>
                        <col width="120">
                        <col width="200">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>参数选项</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>示例值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>httpConfig</td>
                        <td class="layui-text">
                            配置http请求的相关参数。主要作用在：
                            <ul>
                                <li><em>单元格Edit</em> 同步更新服务器。</li>
                                <li><em>表头筛选Filter</em> 同步请求服务器。</li>
                                <li><em>批量编辑batEdit</em> 同步更新服务器。</li>
                                <li>详见 <em>httpConfig 配置</em>。</li>
                            </ul>
                        </td>
                        <td>object</td>
                        <td>{}</td>
                    </tr>
                    <tr>
                        <td>editConfig</td>
                        <td class="layui-text">
                            设置 单元格编辑 配置。
                            <ul>
                                <li>logOn <em>是否开启console.log日志，默认true，调试用</em></li>
                                <li>done <em>编辑后统一回调方法</em></li>
                            </ul>
                        </td>
                        <td>object</td>
                        <td>{logOn: true, done: ''}</td>
                    </tr>
                    <tr>
                        <td>filterConfig</td>
                        <td class="layui-text">
                            设置 表头筛选 配置。
                            <ul>
                                <li>logOn <em>是否开启console.log日志，默认true，调试用</em></li>
                                <li>done <em>filter后统一回调方法</em></li>
                            </ul>
                        </td>
                        <td>object</td>
                        <td>{logOn: true, done: ''}</td>
                    </tr>
                    <tr>
                        <td>event</td>
                        <td>table 所有toolbar 事件定义。<em>详见 event 定义</em></td>
                        <td>object</td>
                        <td>{}</td>
                    </tr>
                    <tr>
                        <td>done</td>
                        <td>每一次过滤/移除过滤都将会触发回调，返回 filters 所有过滤条件 <em>不管mode是什么方式，都将返回 filters</em></td>
                        <td>Function</td>
                        <td>-</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- 3 -->
            <div id="httpConfig">
                <fieldset class="layui-elem-field layui-field-title">
                    <legend>httpConfig 配置</legend>
                </fieldset>
                <h4><span class="layui-badge-dot"></span> 示例</h4>
                <pre class="layui-code" lay-encode="true">
    httpConfig: {
        pkey: {field: 'id', name: 'id'},
        update: {mode: 'api', url: '/update.html', method: 'get', jump: false},
        delete: {mode: 'api', url: '/delete.html', method: 'get', where: {'is_del': 1}, jump: false},
        read: {mode: 'api', url: '/read.html', method: 'get', jump: true, success: ''},
        create: {mode: 'api', url: '/create.html', method: 'get', where: {'id': 0}, jump: true},
    },
            </pre>

                <table class="layui-table">
                    <colgroup>
                        <col width="120">
                        <col>
                        <col width="120">
                        <col width="200">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>参数选项</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>pkey</td>
                        <td class="layui-text">指定http请求中的索引。有些情况下，会做一些伪装，索引和实际字段名并不一样。
                            <ul>
                                <li><em>field</em>本table中索引的名称，获取的值：{{d.field}}</li>
                                <li><em>name</em>发起http请求的索引名称</li>
                            </ul>
                        </td>
                        <td>object</td>
                        <td>{field: 'id', name: 'id'}</td>
                    </tr>
                    <tr>
                        <td>update</td>
                        <td class="layui-text">数据表CURD中的update。<em>如果设置了api请求，则一定要配置这个</em></td>
                        <td>string</td>
                        <td>具体请参见接下的参数</td>
                    </tr>
                    <tr>
                        <td>read</td>
                        <td class="layui-text">数据表CURD中的read。<em>如果设置了api请求，则一定要配置这个</em></td>
                        <td>string</td>
                        <td>具体请参见接下的参数</td>
                    </tr>
                    <tr>
                        <td>delete</td>
                        <td class="layui-text">数据表CURD中的delete。<em>如果设置了api请求，则一定要配置这个</em></td>
                        <td>string</td>
                        <td>具体请参见接下的参数</td>
                    </tr>
                    <tr>
                        <td>create</td>
                        <td class="layui-text">数据表CURD中的create。<em>如果设置了api请求，则一定要配置这个</em></td>
                        <td>string</td>
                        <td>具体请参见接下的参数</td>
                    </tr>
                    <tr>
                        <td>mode</td>
                        <td class="layui-text">
                            设置请求模式。
                            <ul>
                                <li>api <em>发起 http 请求</em></li>
                                <li>local <em>本地处理，不请求服务器</em></li>
                            </ul>
                        </td>
                        <td>string</td>
                        <td>"api"</td>
                    </tr>
                    <tr>
                        <td>url</td>
                        <td>发起http请求的链接<em>如果mode=api，必填</em>
                        </td>
                        <td>string</td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>method</td>
                        <td>http请求的方式，仅支持get、post<em>非必填</em>
                        </td>
                        <td>string</td>
                        <td>"get"</td>
                    </tr>
                    <tr>
                        <td>where</td>
                        <td class="layui-text">
                            http请求的时候，需要额外带上的参数<em>非常有用的一个参数</em>
                            <ul>
                                <li><em>比例“软删除”</em> 常见做法： <em>is_del=1</em>。</li>
                                <pre class="layui-code" lay-encode="true"> { delete: {where: {'is_del': 1}} }</pre>
                                <li><em>比例“创建”</em> 常见做法： <em>id=0</em>。</li>
                                <pre class="layui-code" lay-encode="true"> { create: {where: {'id': 0}} }</pre>
                            </ul>
                            <em>后续计划：</em> 支持 function
                        </td>
                        <td>string</td>
                        <td>{ delete: {where: {'is_del': 1}} }</td>
                    </tr>
                    <tr>
                        <td>jump</td>
                        <td class="layui-text">http请求的方式，仅支持ajax, href<em>非必填</em>
                            <ul>
                                <li><em>false = ajax</em> 就是ajax请求，页面并不跳转。</li>
                                <li><em>true = href</em> 就是 window.location.href。</li>
                            </ul>
                        </td>
                        <td>boolean</td>
                        <td>false</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- footer -->
            <div class="crazy-footer"></div>

        </div>
    </div>
</div>
<script type="text/javascript" src="../lib/layui/layui.all.js"></script>
<!--<script type="text/javascript" src="lib/jquery1.11.1.min.js"></script>-->

</body>
</html>